{% extends 'ApplicationToolsBundle::layout.html.twig' %}

{% block title %}Tables{% endblock %}

{% block stylesheets %}
	<link href="{{ asset('bundles/applicationtools/css/tables/yui/yui.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationtools/js/quicksearch/jquery.quicksearch.js') }}" type="text/javascript"></script>

	<script type="text/javascript">
		$(document).ready(function () {
			/*
			Example 1
			*/
			$('input#id_search1').quicksearch('table#table_example1 tbody tr', {
					noResults: '#noresults',
					stripeRows: ['odd', 'even']
			});
			
			/*
			Example 2 
			*/
			$('input#id_search2').quicksearch('table#table_example2 tbody tr', {
				'delay': 300,
				'selector': 'th',
				'stripeRows': ['odd', 'even'],
				'loader': 'span.loading',
				'bind': 'keyup click',
				'show': function () {
					this.style.color = '';
				},
				'hide': function () {
					this.style.color = '#ccc';
				},
				'prepareQuery': function (val) {
					return new RegExp(val, "i");
				},
				'testQuery': function (query, txt, _row) {
					return query.test(txt);
				}
			});
			
			/*
			Example 3
			*/
			var qs = $('input#id_search_list').quicksearch('ul#list_example li');
			
			$.ajax({
				'url': '/bundles/applicationtools/data/example.json',
				
				'type': 'GET',
				'dataType': 'json',
				'success': function (data) {
					for (i in data['list_items']) {
						$('ul#list_example').append('<li>' + data['list_items'][i] + '</li>');
					}
					qs.cache();
				}
			});
			
			$('input#add_to_list').click(function () {
				$('ul#list_example').append('<li>Added on click</li>');
				qs.cache();
			});
			
		});
	</script>
	
	{#tableOne - quicksorting and quicksearch #}
	<script src="{{ asset('bundles/applicationtools/js/quicksorting/jquery.tablesorter-2.0.4.js') }}" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {

			//Setup the sorting for the table with the first column initially sorted ascending
			//and the rows striped using the zebra widget
			$("#tableOne").tablesorter({ sortList: [[0, 0]], widgets: ['zebra'] });
			
			$('input#id_searchOne').quicksearch('table#tableOne tbody tr', {
				noResults: '#no_rows'
			});
			
		});   
	</script>
	
{% endblock %}

{% block body %}

<div class="section">
    <div class="grid_16">

		<div class="container">
			<div class="row">
				<div class="col_1">
					
					<h3>Simple example</h3>
					<h5><a href="http://github.com/riklomas/quicksearch">More information and download at Github</a></h5>
					<form action="#">
						<fieldset>
							<input type="text" name="search" value="" id="id_search1" placeholder="Search" autofocus />
						</fieldset>
					</form>

					<table id="table_example1">
						<thead>
							<tr>
								<th width="20%">Email</th>
								<th width="10%">Id</th>
								<th width="10%">Phone</th>
								<th width="10%">Total</th>
								<th width="10%">Ip</th>
								<th width="10%">Url</th>
								<th width="10%">Time</th>
								<th width="10%">ISO Date</th>
								<th width="10%">UK Date</th>
							</tr>
						</thead>
						<tbody>
							<tr id="noresults">
								<td colspan="9">No Results</td>
							</tr>
							<tr>
								<th>devo@flexomat.com</th>

								<td>66672</td>
								<td>941-964-8535</td>
								<td>$2482.79</td>
								<td>172.78.200.124</td>

								<td>http://gmail.com</td>
								<td>15:10</td>

								<td>1988/12/14</td>
								<td>14/12/1988</td>
							</tr>

							<tr>
								<th>henry@mountdev.net</th>

								<td>35889</td>

								<td>941-964-9543</td>
								<td>$2776.09</td>
								<td>119.232.182.142</td>
								<td>http://www.gmail.com</td>
								<td>3:54</td>

								<td>1974/1/19</td>

								<td>19/1/1974</td>
							</tr>

							<tr>
								<th>christian@reno.gov</th>
								<td>60021</td>
								<td>941-964-5617</td>

								<td>$2743.41</td>
								<td>167.209.64.181</td>
								<td>http://www.dotnet.ca</td>
								<td>10:58</td>
								<td>2000/3/25</td>
								<td>25/3/2000</td>

							</tr>

							<tr>
								<th>muffins@donuts.com</th>
								<td>17927</td>
								<td>941-964-9511</td>
								<td>$2998.18</td>

								<td>210.214.231.182</td>

								<td>http://google.se</td>
								<td>21:22</td>
								<td>1993/1/24</td>
								<td>24/1/1993</td>
							</tr>

							<tr>
								<th>muffins@reno.gov</th>

								<td>76375</td>
								<td>941-964-2757</td>
								<td>$1836.09</td>
								<td>220.222.93.171</td>

								<td>http://www.samba.org</td>
								<td>15:22</td>

								<td>1988/4/4</td>
								<td>4/4/1988</td>
							</tr>

							<tr>

								<th>mendez@gmail.com</th>
								<td>45834</td>
								<td>941-964-2575</td>

								<td>$2805.46</td>
								<td>228.170.245.253</td>
								<td>http://flexomat.com</td>

								<td>11:31</td>
								<td>1975/12/12</td>
								<td>12/12/1975</td>

							</tr>

							<tr>
								<th>dev@gmail.com</th>

								<td>20022</td>
								<td>941-964-4967</td>
								<td>$3296.54</td>
								<td>175.248.70.240</td>

								<td>http://www.flexomat.com</td>
								<td>4:27</td>

								<td>2002/7/3</td>
								<td>3/7/2002</td>
							</tr>

							<tr>
								<th>foo@polyester.se</th>

								<td>55977</td>

								<td>941-964-745</td>
								<td>$2953.73</td>
								<td>222.114.227.156</td>
								<td>http://www.donuts.com</td>
								<td>23:49</td>

								<td>1977/8/4</td>

								<td>4/8/1977</td>
							</tr>

							<tr>
								<th>adam@aftonbladet.se</th>
								<td>38867</td>
								<td>941-964-6302</td>

								<td>$1949.27</td>
								<td>116.241.143.196</td>
								<td>http://flexomat.com</td>
								<td>23:35</td>
								<td>1995/7/27</td>
								<td>27/7/1995</td>

							</tr>

							<tr>
								<th>devo@donuts.com</th>
								<td>51426</td>
								<td>941-964-1234</td>
								<td>$1067.00</td>

								<td>88.96.149.82</td>

								<td>http://www.polyester.se</td>
								<td>15:17</td>
								<td>1986/1/5</td>
								<td>5/1/1986</td>
							</tr>


							<tr>
								<th>henry@samba.org</th>

								<td>40859</td>
								<td>941-964-4856</td>
								<td>$3401.19</td>
								<td>68.152.250.74</td>

								<td>http://www.flexomat.com</td>
								<td>4:36</td>

								<td>1990/3/7</td>
								<td>7/3/1990</td>
							</tr>

							<tr>

								<th>found@dotnet.ca</th>
								<td>23986</td>
								<td>941-964-2686</td>

								<td>$1393.52</td>
								<td>98.102.181.138</td>
								<td>http://lostnfound.org</td>

								<td>5:51</td>
								<td>1993/7/22</td>
								<td>22/7/1993</td>

							</tr>

							<tr>
								<th>carl@fish.org</th>

								<td>73392</td>
								<td>941-964-5792</td>
								<td>$3876.04</td>
								<td>246.234.182.243</td>

								<td>http://www.google.se</td>
								<td>6:52</td>

								<td>1984/7/14</td>
								<td>14/7/1984</td>
							</tr>

							<tr>
								<th>found@mountdev.net</th>

								<td>03519</td>

								<td>941-964-1599</td>
								<td>$1176.48</td>
								<td>104.212.122.177</td>
								<td>http://donutsx.com</td>
								<td>18:52</td>

								<td>2000/8/6</td>

								<td>6/8/2000</td>
							</tr>
						</tbody>
					</table>
				

				</div>
			</div>
		</div>

    </div>
    <div class="clear"></div>
</div>
<div class="section">
    <div class="grid_16">
		<div class="container">
			<div class="row">
				<div class="col_1">

					<h3>Example with options &mdash; search with email regexp on &lt;th&gt; only</h3>

					<form action="#">
						<fieldset>
							<input type="text" name="search" value="" id="id_search2" /> <span class="loading">Loading...</span>
						</fieldset>
					</form>

					<table id="table_example2">
						<thead>
							<tr>
								<th width="30%">Email</th>
								<th width="10%">Id</th>
								<th width="10%">Phone</th>
								<th width="10%">Total</th>
								<th width="10%">Ip</th>
								<th width="10%">Url</th>
								<th width="10%">Time</th>
								<th width="10%">ISO Date</th>
								<th width="10%">UK Date</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th>devo@flexomat.com</th>

								<td>66672</td>
								<td>941-964-8535</td>
								<td>$2482.79</td>
								<td>172.78.200.124</td>

								<td>http://gmail.com</td>
								<td>15:10</td>

								<td>1988/12/14</td>
								<td>14/12/1988</td>
							</tr>

							<tr>
								<th>henry@mountdev.net</th>

								<td>35889</td>

								<td>941-964-9543</td>
								<td>$2776.09</td>
								<td>119.232.182.142</td>
								<td>http://www.gmail.com</td>
								<td>3:54</td>

								<td>1974/1/19</td>

								<td>19/1/1974</td>
							</tr>

							<tr>
								<th>christian@reno.gov</th>
								<td>60021</td>
								<td>941-964-5617</td>

								<td>$2743.41</td>
								<td>167.209.64.181</td>
								<td>http://www.dotnet.ca</td>
								<td>10:58</td>
								<td>2000/3/25</td>
								<td>25/3/2000</td>

							</tr>

							<tr>
								<th>muffins@donuts.com</th>
								<td>17927</td>
								<td>941-964-9511</td>
								<td>$2998.18</td>

								<td>210.214.231.182</td>

								<td>http://google.se</td>
								<td>21:22</td>
								<td>1993/1/24</td>
								<td>24/1/1993</td>
							</tr>

							<tr>
								<th>muffins@reno.gov</th>

								<td>76375</td>
								<td>941-964-2757</td>
								<td>$1836.09</td>
								<td>220.222.93.171</td>

								<td>http://www.samba.org</td>
								<td>15:22</td>

								<td>1988/4/4</td>
								<td>4/4/1988</td>
							</tr>

							<tr>

								<th>mendez@gmail.com</th>
								<td>45834</td>
								<td>941-964-2575</td>

								<td>$2805.46</td>
								<td>228.170.245.253</td>
								<td>http://flexomat.com</td>

								<td>11:31</td>
								<td>1975/12/12</td>
								<td>12/12/1975</td>

							</tr>

							<tr>
								<th>dev@gmail.com</th>

								<td>20022</td>
								<td>941-964-4967</td>
								<td>$3296.54</td>
								<td>175.248.70.240</td>

								<td>http://www.flexomat.com</td>
								<td>4:27</td>

								<td>2002/7/3</td>
								<td>3/7/2002</td>
							</tr>

							<tr>
								<th>foo@polyester.se</th>

								<td>55977</td>

								<td>941-964-745</td>
								<td>$2953.73</td>
								<td>222.114.227.156</td>
								<td>http://www.donuts.com</td>
								<td>23:49</td>

								<td>1977/8/4</td>

								<td>4/8/1977</td>
							</tr>

							<tr>
								<th>adam@aftonbladet.se</th>
								<td>38867</td>
								<td>941-964-6302</td>

								<td>$1949.27</td>
								<td>116.241.143.196</td>
								<td>http://flexomat.com</td>
								<td>23:35</td>
								<td>1995/7/27</td>
								<td>27/7/1995</td>

							</tr>

							<tr>
								<th>devo@donuts.com</th>
								<td>51426</td>
								<td>941-964-1234</td>
								<td>$1067.00</td>

								<td>88.96.149.82</td>

								<td>http://www.polyester.se</td>
								<td>15:17</td>
								<td>1986/1/5</td>
								<td>5/1/1986</td>
							</tr>


							<tr>
								<th>henry@samba.org</th>

								<td>40859</td>
								<td>941-964-4856</td>
								<td>$3401.19</td>
								<td>68.152.250.74</td>

								<td>http://www.flexomat.com</td>
								<td>4:36</td>

								<td>1990/3/7</td>
								<td>7/3/1990</td>
							</tr>

							<tr>

								<th>found@dotnet.ca</th>
								<td>23986</td>
								<td>941-964-2686</td>

								<td>$1393.52</td>
								<td>98.102.181.138</td>
								<td>http://lostnfound.org</td>

								<td>5:51</td>
								<td>1993/7/22</td>
								<td>22/7/1993</td>

							</tr>

							<tr>
								<th>carl@fish.org</th>

								<td>73392</td>
								<td>941-964-5792</td>
								<td>$3876.04</td>
								<td>246.234.182.243</td>

								<td>http://www.google.se</td>
								<td>6:52</td>

								<td>1984/7/14</td>
								<td>14/7/1984</td>
							</tr>

							<tr>
								<th>found@mountdev.net</th>

								<td>03519</td>

								<td>941-964-1599</td>
								<td>$1176.48</td>
								<td>104.212.122.177</td>
								<td>http://donutsx.com</td>
								<td>18:52</td>

								<td>2000/8/6</td>

								<td>6/8/2000</td>
							</tr>
						</tbody>
					</table>

				</div>
			</div>
		</div>

    </div>
    <div class="clear"></div>
</div>
<div class="section">
    <div class="grid_16">
		<div class="container">
			<div class="row">
				<div class="col_1">

					<h3>Ajax example</h3>
					
					<form action="#">
						<fieldset>
							<input type="text" name="search" value="" id="id_search_list" />
						</fieldset>
					</form>
					
					<input type="button" id="add_to_list" value="Add to list">
					
					<ul id="list_example">
						<li>Afghanistan</li> 
						<li>Albania</li> 
						<li>Algeria</li> 
						<li>American Samoa</li> 
						<li>Andorra</li> 
						<li>Angola</li> 
						<li>Anguilla</li> 
						<li>Antarctica</li> 
						<li>Antigua and Barbuda</li> 
						<li>Argentina</li> 
						<li>Armenia</li> 
						<li>Aruba</li> 
						<li>Australia</li> 
						<li>Austria</li> 
						<li>Azerbaijan</li> 
					</ul>

				</div>
			</div>
		</div>

    </div>
    <div class="clear"></div>
</div>
<div class="section">
    <div class="grid_16">
		<div class="container">
			<div class="row">
				<div class="col_1">

					<h3>jQuery tableSorter and quickSearch Plugins Together Demo</h3>
					<form action="#">
						<fieldset>
							<input type="text" name="search" value="" id="id_searchOne" placeholder="Search" autofocus />
						</fieldset>
					</form>
                
					<table id="tableOne" class="yui">    
						<thead>
							<tr>
								<th><a href="#" title="Click Header to Sort">Name</a></th>
								<th><a href="#" title="Click Header to Sort">English</a></th>
								<th><a href="#" title="Click Header to Sort">Spanish</a></th>
								<th><a href="#" title="Click Header to Sort">Math</a></th>
								<th><a href="#" title="Click Header to Sort">History</a></th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Bob Smith</td>
								<td>80</td>
								<td>70</td>
								<td>75</td>
								<td>80</td>
							</tr>
							<tr>            
								<td>George Jones</td>
								<td>90</td>
								<td>88</td>
								<td>100</td>
								<td>90</td>
							</tr>
							<tr>            
								<td>Rob Johnson</td>
								<td>85</td>
								<td>95</td>
								<td>80</td>
								<td>85</td>
							</tr>
							<tr>            
								<td>Rick Stevens</td>
								<td>60</td>
								<td>55</td>
								<td>100</td>
								<td>100</td>
							</tr>
							<tr>            
								<td>Jenn Gilbert</td>
								<td>68</td>
								<td>80</td>
								<td>95</td>
								<td>80</td>
							</tr>
							<tr>            
								<td>Rachel Thompsen</td>
								<td>100</td>
								<td>99</td>
								<td>100</td>
								<td>90</td>
							</tr>
							<tr>            
								<td>Rick Lopez</td>
								<td>85</td>
								<td>68</td>
								<td>90</td>
								<td>90</td>
							</tr>
							<tr>            
								<td>John Petersen</td>
								<td>100</td>
								<td>90</td>
								<td>90</td>
								<td>85</td>
							</tr>
							<tr>            
								<td>Tad Young</td>
								<td>80</td>
								<td>50</td>
								<td>65</td>
								<td>75</td>
							</tr>
							<tr>            
								<td>Marshall Washington</td>
								<td>85</td>
								<td>100</td>
								<td>100</td>
								<td>90</td>
							</tr>
						</tbody>
						<tfoot>
							<tr id="no_rows" style="display:none;">
								<td colspan="5">
									No rows match the filter...
								</td>
							</tr>	    
						</tfoot>
					</table>


				</div>
			</div>
		</div>

    </div>
    <div class="clear"></div>
</div>

{% endblock %}